<template>
  <div id="assessdetail">
    <el-form :model="editForm" label-width="300px" ref="editForm" :inline="true" style="padding:10px 0 0;clear:both" :rules="editFormRules" v-show="!pageLoading">
      <table cellspacing="0" cellpadding="0" class="mytable">
        <tr>
          <th style="min-width:100px;" >姓名</th>
          <td style="min-width:200px;">
            <template v-if="readOnly" >
              <template>{{editForm.realname}}</template>
            </template>
            <template v-else>
              <el-form-item prop="realname">
                <el-input v-model="editForm.realname" style="width: 300px;" />
              </el-form-item>
            </template>
          </td>
          <th style="min-width:100px;" >性别</th>
          <td style="min-width:200px;">
            <template v-if="readOnly" >
              <template>{{editForm.gender}}</template>
            </template>
            <template v-else>
              <el-form-item prop="gender">
                <el-select v-model="editForm.gender" placeholder="请选择" style="width: 300px;">
                  <el-option v-for="item in genderOptions" :key="'gender_' + item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >所属部门或单位</th>
          <td style="min-width:200px;" colspan="3">
            <template>{{currentUnitname}}</template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >三级单位及部门</th>
          <td style="min-width:200px;">
            <template v-if="readOnly" >
              <template>{{editForm.unitname}}</template>
            </template>
            <template v-else>
              <el-form-item prop="unitname">
                <el-input v-model="editForm.unitname" style="width: 300px;" />
              </el-form-item>
            </template>
          </td>
          <th style="min-width:100px;" >职务级别</th>
          <td style="min-width:200px;">
            <template v-if="readOnly" >
              <template>{{editForm.level}}</template>
            </template>
            <template v-else>
              <el-form-item prop="level">
                <el-select v-model="editForm.level" placeholder="请选择" style="width: 350px;">
                  <el-option v-for="item in levelOptions" :key="'level_' + item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >职务</th>
          <td style="min-width:200px;">
            <template v-if="readOnly" >
              <template>{{editForm.job}}</template>
            </template>
            <template v-else>
              <el-form-item prop="job">
                <el-input v-model="editForm.job" style="width: 300px;" />
              </el-form-item>
            </template>
          </td>
          <th style="min-width:100px;" >职务职级/专业技术等级</th>
          <td style="min-width:200px;">
            <template v-if="readOnly" >
              <template>{{editForm.joblevel}}</template>
            </template>
            <template v-else>
              <el-form-item prop="joblevel">
                <el-select v-model="editForm.joblevel" placeholder="请选择" style="width: 300px;">
                  <el-option v-for="item in joblevelOptions" :key="'joblevel_' + item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >是否在职</th>
          <td style="min-width:200px;vertical-align:middle">
            <template v-if="readOnly" >
              <template>{{editForm.inposition}}</template>
            </template>
            <template v-else>
              <div style="float: left;">
                <el-form-item prop="inposition">
                  <el-select v-model="editForm.inposition" placeholder="请选择" style="width: 100px;">
                    <el-option v-for="item in yesOrNoOptions" :key="'inposition_' + item" :label="item" :value="item" />
                  </el-select>
                </el-form-item>
              </div>
              <div style="color:red; font-weight: bolder; text-align: left; float: left;">
                在职人员选择“是”，离退休人员选择“否”，<br>其中离退休人员仅统计登记备案人员
              </div>
            </template>
          </td>
          <th style="min-width:100px;">是否为主要负责人</th>
          <td style="min-width:200px;vertical-align:middle">
            <template v-if="readOnly" >
              <template>{{editForm.major}}</template>
            </template>
            <template v-else>
              <el-form-item prop="major" v-if="!editForm.inposition||editForm.inposition=='是'">
                <el-select v-model="editForm.major" placeholder="请选择" style="width: 100px;">
                  <el-option v-for="item in yesOrNoOptions" :key="'major_' + item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
              <template v-else>否</template>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >是否登记备案人员</th>
          <td style="min-width:200px;vertical-align:middle">
            <template v-if="readOnly" >
              <template>{{editForm.registered}}</template>
            </template>
            <template v-else>
              <el-form-item prop="registered" v-if="!editForm.inposition||editForm.inposition=='是'">
                <el-select v-model="editForm.registered" placeholder="请选择" style="width: 100px;">
                  <el-option v-for="item in yesOrNoOptions" :key="'registered_' + item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
              <template v-else>是</template>
            </template>
          </td>
          <th style="min-width:100px;" >手机联系方式（个人手机）</th>
          <td style="min-width:200px;">
            <template v-if="readOnly" >
              <template>{{editForm.phone}}</template>
            </template>
            <template v-else>
              <el-form-item prop="phone">
                <el-input v-model="editForm.phone" style="width: 300px;" />
              </el-form-item>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >保管单位</th>
          <td style="min-width:200px;" colspan="3">
            <template v-if="readOnly" >
              <template>{{editForm.custodian}}</template>
            </template>
            <template v-else>
              <el-form-item prop="custodian">
                <el-select v-model="editForm.custodian" placeholder="请选择" style="width: 300px;">
                  <el-option v-for="item in custodianOptions" :key="'custodian_' + item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >证件</th>
          <td style="min-width:200px;" colspan="3">
            <template v-if="readOnly" >
              <span v-for="(item, index) in editForm.docList" :key="'doc_' + index">
                <div>
                  {{ item.doctype }}（证件号码：{{ item.docnum }}，签发日期：{{ item.startdate }}，失效日期：{{ item.enddate }}）
                </div>
              </span>
            </template>
            <template v-else>
              <el-form-item prop="docList">
                <div v-for="(item, index) in editForm.docList" :key="'doc_' + index">
                  <div style="margin: 6px 0;">
                    <el-select v-model="item.doctype" placeholder="请选择证件类型">
                      <el-option v-for="(item,index) in doctypeOptions" :key="'doctype_' + index" :label="item" :value="item" />
                    </el-select>
                    <span v-if="item.doctype === '其他'" style="color: #f00; font-weight: bolder; margin-right: 10px;">请在备注栏说明具体情况</span>
                    <el-input v-model="item.docnum" placeholder="请输入证件号码" style="width: 300px;"/>
                    <el-date-picker
                      v-model="item.fulldate"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="请选择签发日期"
                      end-placeholder="请选择失效日期"
                      value-format="yyyy-MM-dd"
                      style="width: 360px;"
                      @change="(value) => {
                        handleChange(value, index)
                      }"
                    >
                    </el-date-picker>
                    <i v-if="editForm.docList && editForm.docList.length !== 1" class="el-icon-remove" @click="removeItem(index)" style="font-size: 26px; line-height: 40px; vertical-align: middle;"></i>
                  </div>
                </div>
                <i class="el-icon-circle-plus" @click="addItem()" style="font-size: 26px; vertical-align: middle;"></i>
              </el-form-item>
            </template>
          </td>
        </tr>
        <tr>
          <th style="min-width:100px;" >备注</th>
          <td style="min-width:200px;" colspan="3">
            <template v-if="readOnly" >
              <template>{{editForm.remarks}}</template>
            </template>
            <template v-else>
              <el-form-item prop="remarks">
                <el-input v-model="editForm.remarks" style="width: 800px;" />
              </el-form-item>
            </template>
          </td>
        </tr>
      </table>
      <template v-if="!readOnly">
        <el-button type="primary" @click.native="editFormSubmit()" :loading="saveloading" style="margin-left:10px; margin-top: 10px;">保存</el-button>
      </template>
    </el-form>
  </div>
</template>

<script>
export default {
  watch: {
    timestamp: {
      handler (val) {
        this.editForm = {}
        this.editForm = {...this.unitData}
        this.saveloading = false
      },
      immediate: true
    }
  },
  props: {
    timestamp: '',
    projectId: null,
    readOnly: false,
    unitData: {},
    project: {},
    currentUnitname: ''
  },
  data () {
    return {
      editFormRules: {
        realname: [{ required: true, message: '必填项', trigger: 'blur' }],
        gender: [{ required: true, message: '必填项', trigger: 'blur' }],
        // unitname: [{ required: true, message: '必填项', trigger: 'blur' }],
        level: [{ required: true, message: '必填项', trigger: 'blur' }],
        job: [{ required: true, message: '必填项', trigger: 'blur' }],
        joblevel: [{ required: true, message: '必填项', trigger: 'blur' }],
        inposition: [{ required: true, message: '必填项', trigger: 'blur' }],
        major: [{ required: true, message: '必填项', trigger: 'blur' }],
        registered: [{ required: true, message: '必填项', trigger: 'blur' }],
        phone: [{ required: true, message: '必填项', trigger: 'blur' }],
        custodian: [{ required: true, message: '必填项', trigger: 'blur' }]
      },
      pageLoading: false,
      saveloading: false,
      editForm: {
        realname: '',
        gender: '',
        unitname: '',
        level: '',
        job: '',
        joblevel: '',
        inposition: '',
        major: '',
        registered: '',
        docList: [
          {
            doctype: '',
            docnum: '',
            startdate: '',
            enddate: '',
            fulldate: []
          }
        ],
        phone: '',
        custodian: '',
        remarks: ''
      },
      genderOptions: ['男', '女'],
      levelOptions: ['厅局级正职（含转专业技术岗保留生活待遇）', '厅局级副职（含转专业技术岗保留生活待遇）', '县处级正职', '县处级副职', '乡科级正职', '乡科级副职', '其他'],
      joblevelOptions: [
        '行政正职、书记',
        '行政正职、副书记',
        '书记、行政副职',
        '专技十二级',
        '专技十一级',
        '专技十级',
        '专技九级',
        '专技八级',
        '专技七级',
        '专技六级',
        '专技五级',
        '专技四级',
        '专技三级',
        '专技二级',
        '专技一级',
        '内设机构正职',
        '内设机构副职',
        '职工',
        '管理九级',
        '管理八级',
        '管理七级',
        '管理六级',
        '管理五级',
        '专技岗见习',
        '无职务职级',
        '助理研究员',
        '副研究员'
      ],
      yesOrNoOptions: ['是', '否'],
      custodianOptions: ['部人事司', '部离退休干部局', '本单位', '所属单位'],
      doctypeOptions: ['普通护照', '港澳通行证', '台湾通行证', '通行证', '其他']
    }
  },
  methods: {
    addItem () {
      this.editForm.docList.push({
        doctype: '',
        docnum: '',
        startdate: '',
        enddate: '',
        fulldate: []
      })
    },
    removeItem (index) {
      this.editForm.docList.splice(index, 1)
    },
    handleChange (value, index) {
      this.editForm.docList[index].startdate = value[0]
      this.editForm.docList[index].enddate = value[1]
    },
    editFormSubmit () {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          if (this.readOnly) {
            this.$message({
              message: '提交成功！',
              type: 'success'
            })
          } else {
            let flag = true
            this.editForm.docList.forEach(item => {
              if (!item.doctype || !item.docnum || !item.startdate || !item.enddate || !item.fulldate) {
                this.$message({
                  message: '请将证件信息填写完整',
                  type: 'error'
                })
                flag = false
              }
              if (item.doctype === '其他' && !this.editForm.remarks) {
                this.$message({
                  message: '证件类型如选择其他，请在备注栏说明具体情况',
                  type: 'error'
                })
                flag = false
              }
            })
            // 返回父页面数据
            if (flag) {
              this.saveloading = true
              this.editForm.department = this.currentUnitname
              this.$emit('saveUnitData', JSON.parse(JSON.stringify(this.editForm)))
            }
          }
        }
      })
    }
  }
}
</script>
<style>
#assessdetail .el-upload-list__item{
  width: 250px;
}
#assessdetail a{
  width: 200px;
}
.assessdetail .el-tabs__header{
  height: 29px;
  background: #FAFAFA;
  line-height: 30px;
  font-family: '宋体';
  padding:0 20px;
  border-bottom: 2px solid #E4E7ED;
  margin:0;
}
.assessdetail .el-tabs__item{
  line-height: 30px;
  height: 30px;
  font-weight:bolder;
}
  .cardtab .el-tabs__header{
    padding:0 !important;
    border-bottom:1px solid #E4E7ED;
  }
  #assessdetail .wboxs{
    height:45px;
    padding-top:0;
    margin-bottom: 10px;
  }
  .wboxs{
    padding:5px 15px;
    width: calc(100% - 30px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
</style>
<style scoped>
  .tickettable th{
    font-weight:lighter;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
    text-align: center;
  }
  .tickettable{
    width: 100%;
    border-left: 1px solid #95B8E7;
    border-top: 1px solid #95B8E7;
  }
  .tickettable td, .tickettable th{
    padding:5px 10px;
    margin:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体';
    border-bottom: 1px solid #95B8E7;
    border-right: 1px solid #95B8E7;
  }
  .tickettable td{
    vertical-align: middle;
    text-align: center;
    font-weight: bolder;
  }
  .mytable{
    border-top: 1px solid #74a6cc;
    border-left: 1px solid #74a6cc;
    margin:0 10px 10px;
    width: calc(100% - 20px);
  }
  .mytable th{
    padding: 10px;
    border-right: 1px solid #74a6cc;
    border-bottom: 1px solid #74a6cc;
    line-height: 150%;
    background: #FAFAFA;
    width:200px;
    text-align:right;
  }
  .mytable td{
    padding: 10px;
    border-right: 1px solid #74a6cc;
    border-bottom: 1px solid #74a6cc;
    vertical-align: top;
    line-height: 150%;
  }
</style>
